import React from 'react';
import { Input, Modal, Form,Switch,Spin,Select } from 'antd';
import { connect } from 'dva';
import { FormComponentProps } from 'antd/es/form';
const FormItem = Form.Item;
class Update extends React.Component {
  /**
   * 前置方法
   */
  componentDidMount = () =>{
    //console.log('this.props',this.props);
    
  }
  /**
   * 本函数用户modal 点击确定之后把form表单里面的值传回去
   */
  okHandle = () => {
    this.props.form.validateFields((err, fieldsValue) => {
      if (err) return;
      this.props.form.resetFields();
      this.props.onSubmit(fieldsValue);
    });
  };
  getOption = list => {
    const { Option } = Select;
    if (!list || list.length < 1) {
      return (
        <Option key={0} value={0}>
          没有找到选项
        </Option>
      );
    }
    
    //console.log(typeof list);
    return list.map(item => (
      <Option key={item.category_id} value={item.category_id}>
        {item.showName}
        
      </Option>
    ));
  };
  getParentListOption = () => {
    const { ParentData } = this.props;
    return this.getOption(Array.from(ParentData));
  };
  render() {
    //console.log('this.props.ParentData',this.props.ParentData);
    return (
      <Modal
        destroyOnClose
        title={this.props.modalTitle}
        visible={this.props.modalVisible}
        onOk={this.okHandle}
        confirmLoading={this.props.confirmLoading}
        onCancel={() => this.props.handleModalVisible()}
      >
        <Spin spinning={this.props.modalLoading}>
        <FormItem labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label="分类名称">
          {this.props.form.getFieldDecorator('category_name', {
            initialValue:this.props.CategoryData.category_name,
            rules: [{ required: true, message: '请输入最少2个最多35个字符的值', min: 2 ,max:35}],
          })(<Input placeholder="请输入" />)}
        </FormItem>
        <FormItem labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label="父级菜单">
            <div>
              {this.props.form.getFieldDecorator('pid', {
                initialValue: this.props.CategoryData.pid,
                rules: [{ required: false, message: '请选择父菜单' }],
              })(
                <Select showSearch placeholder="请选择" disabled={false} style={{ width: '100%' }}>
                  {
                    this.getParentListOption()
                  }
                  
                </Select>
              )}
            </div>
        </FormItem>
        <FormItem labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label="排序">
          {this.props.form.getFieldDecorator('category_sort', {
            initialValue:this.props.CategoryData.category_sort,
            rules: [{ required: true, message: '请输入1~2位排序', min: 1 ,max:2}],
          })(<Input placeholder="请输入" />)}
        </FormItem>
        <FormItem labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label="列表样式">
          {this.props.form.getFieldDecorator('category_class', {
            initialValue:this.props.CategoryData.category_class,
            rules: [{ required: false, message: '请输入1~20个字符', min: 1 ,max:20}],
          })(<Input placeholder="请输入" />)}
        </FormItem>
        <FormItem labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label="是否启用">
          {this.props.form.getFieldDecorator('category_status', {})(<Switch checkedChildren="显示" unCheckedChildren="隐藏" defaultChecked={this.props.CategoryData.category_status} />)}
        </FormItem>
        </Spin>
      </Modal>
    );
  }
}

export default Update;
